{% extends 'AdminBundle::layout.html.twig' %}

    {% block title %}培训通知{% endblock %}

    {% block css %}
        <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker.min.css') }}">
    {% endblock %}


    {% block top %}
        {#{{ dump() }}#}
        {{ parent() }}
    {% endblock %}


    {% block left_body_top %}
        {{ parent() }}
    {% endblock %}

    {% block left_body %}
        {{ parent() }}
    {% endblock %}

    {% block right_body %}
    <div class="page-header">
        <div class="page-right-top">
            <div class="right-top">
                <span class="right-title">消息通知</span>
            </div>
            <div class="top-nav top-nav-active">培训通知</div>
        </div>

        <div class="main-content">
            <div class="index-list-box">
                <div class="main-top">
                    <div class="index-list mes-m1">
                        <div class="index-total">总发布培训数</div>
                        <div class="index-totalNum">
                            <span>{{ all_count }}</span>个
                        </div>
                    </div>
                    <div class="index-list mes-m2">
                        <div class="index-total" style="padding-top: 13px;">本月发布培训数</div>
                        <div class="index-totalNum">
                            <span>{{ month_count }}</span>个
                        </div>
                    </div>
                    <div class="index-list index-m3">
                        <div class="index-total">本年培训人数</div>
                        <div class="index-totalNum">
                            <span>{{ year_count }}</span>个
                        </div>
                    </div>
                    <div class="index-list mes-m4">
                        <div class="index-total">本年培训企业数</div>
                        <div class="index-totalNum">
                            <span>{{ year_company_count }}</span>个
                        </div>
                    </div>
                </div>

                <div class="mes-content">
                    <div class="main-mes-top">
                        <div class="fl">
                            <a class="release-btn fl" style="width:140px;" href="{{ path('article_notice_release',{"type":2}) }}">
                                <div class="train-width">
                                    <span class="re-icon fl"></span>
                                    <span class="re-text fl">发布培训通知</span>
                                </div>
                            </a>
                        </div>

                        <div class="fr">
                            <div class="mes-input fl">
                                <input type="text" class="keyword-input" placeholder="请输入关键词">
                            </div>

                            <div class="mes-input fl mes-date">
                                <span class="date-icon"></span>
                                <div class="form-group">
                                    <div class="right col-xs-6 text-left">
                                        <div class="input-group">
                                            <input type="text" style="width: 114px;" class="form-control form_datetime" id="addtime" name="addtime" placeholder="开始时间">
                                            <span class="input-group-addon" id="basic-addon"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mes-input fl mes-date">
                                <span class="date-icon"></span>
                                <div class="form-group">
                                    <div class="right col-xs-6 text-left">
                                        <div class="input-group">
                                            <input type="text" style="width: 114px;" class="form-control form_datetime" id="addtimes" name="addtime" placeholder="结束时间">
                                            <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button class="mes-query-btn fl">查询</button>
                        </div>

                        <div class="clearfix"></div>
                    </div>

                    <div class="main-mes-content">
                        <div class="al-released">培训通知列表</div>

                        {#培训列表#}
                        <table class="table table-hover" style="table-layout:fixed;">
                            <thead>
                            <tr style="background-color: #f3f9fd;">
                                <th style="width: 15%">培训编号</th>
                                <th style="width:30%;text-align: center;">公告标题</th>
                                <th style="text-align: center;">发布时间</th>
                                <th style="text-align: center;">已读人数</th>
                                <th style="text-align: center;">未读人数</th>
                                <th style="text-align: center;">已报名人数</th>
                                <th style="text-align: center;">未报名人数</th>
                            </tr>
                            </thead>
                            <tbody>



                            </tbody>
                        </table>

                        <div class="page-box">
                            <ul class="pagination">


                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}



{% block box %}
{% endblock %}

{% block javascript %}
<script src="{{ asset('assets/js/bootstrap-datetimepicker.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/bootstrap-datetimepicker.zh-CN.js') }}" type="text/javascript"></script>
    {{ parent() }}
<script type="text/javascript">
//    $(function () {

        SidebarHighlighting('2');
        SonSidebar('2', '2');

        // 日历
        $('.form_datetime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn:  1,
            autoclose: 1
        });

        // 点击查询 //1
        var search_keyword = "";
        var start_time = "";
        var end_time = "";
        $('.mes-query-btn').on('click', function() {
            search_keyword = $('.keyword-input').val();
            start_time = $('#addtime').val();
            end_time = $('#addtimes').val();

            if (start_time != '' && end_time == '') {
                popStatus(2, '请选择结束时间', 1, '', true);
                return;
            }

            if (start_time == '' && end_time != '') {
                popStatus(2, '请选择开始时间', 1, '', true);
                return;
            }

            if (start_time > end_time) {
                popStatus(2, '开始时间不得大于结束时间', 1, '', true);
            }

            page_times = 0;
            addSearchAction(1);
        })

        // 获取培训列表
        var page_times = 0;
        function getList(page,search_keyword,start_time,end_time) { //2
            page_times++;
            var param = {is_training:2,page:page,search_keyword:search_keyword,start_time:start_time,end_time:end_time};

            $.getJSON("{{ path('api_admin_article_list') }}",param,function(data){
                $("table tbody").empty(); //3
                console.log(data);

                var list_all_count = data.data.search_all_count;
                var allpage = data.data.all_page;

                // 分页样式
                if(page_times == 1 && allpage > 0){
                    pageAction(list_all_count,allpage);
                }

                if(data.errorCode == 0){
                    var item = data.data.info;
                    for(var i in item){
                        var html = '';
                        var info_url = "{{ path('article_training_detail',{'id':'546565434'}) }}".replace("546565434",item[i].id);

                        var read_url = "{{ path('article_training_read_list',{"id":"3545657675454","type":"4656434454656","page":1}) }}".replace("3545657675454",item[i].id);

                        html += '<tr>';
                        html += '<td class="a-line">'+ item[i].training_no +'</td>';
                        html += '<td class="a-line" style="text-align:center"><a href="'+ info_url +'">'+ item[i].title +'</a></td>';
                        html += '<td style="text-align: center;">'+ item[i].created_at +'</td>';
                        html += '<td style="text-align: center;"><a href="'+ read_url.replace("4656434454656",4) +'">'+ item[i].is_read +'</a></td>';
                        html += '<td style="text-align: center;"><a href="'+ read_url.replace("4656434454656",3) +'">'+ item[i].is_not_read +'</a></td>';
                        html += '<td style="text-align: center;"><a href="'+ read_url.replace("4656434454656",6) +'">'+ item[i].is_apply +'</a></td>';
                        html += '<td style="text-align: center;"><a href="'+ read_url.replace("4656434454656",5) +'">'+ item[i].is_not_apply +'</a></td>';
                        html += '</tr>';
                        $("table tbody").append(html);
                    }
                }
            })
        }

        addSearchAction(1);  //4

        //5
        function addSearchAction(page){
            getList(page,search_keyword,start_time,end_time);
        }
//    })
</script>
{% endblock %}
